<template>
  <div class="recharge_title">{{$t('Money_card_record')}}</div>
  <div class="recharge_content">
    <div class="title">
      <span class="flex-list">{{$t('money_type')}}</span>
      <span class="flex-list">{{$t('Collection_time')}}</span>
      <span class="flex-list">{{$t('Claim_amount')}}</span>
			<span class="flex-list">{{$t('Type_claim')}}</span>
    </div>
    <div class="main">
      <div class="main_line" v-for="item in game_list" :key="item.id">
        <span v-if="item.mc_type == 1" class="flex-list">{{$t('Monthly_card')}}</span>
				<span v-if="item.mc_type == 2" class="flex-list">{{$t('season_card')}}</span>
				<span v-if="item.mc_type == 3" class="flex-list">{{$t('Half_year_card')}}</span>
				<span v-if="item.mc_type == 4" class="flex-list">{{$t('Year_card')}}</span>
				<span v-if="item.mc_type == 5" class="flex-list">{{$t('week_saving_card')}}</span>
        <span class="flex-list">{{ item.created_at }}</span>
        <span class="flex-list">${{ item.use_money }}</span>
        <span v-if="item.use_type == 1" class="flex-list"><el-tag>{{$t('Immediately')}}</el-tag></span>
        <span v-if="item.use_type == 2" class="flex-list"><el-tag type="success">{{$t('Daily_collection')}}</el-tag></span>
      </div>
      <p v-show="game_list.length == 0" style="text-align: center;padding: 20px;color: #6c6c6c;">{{$t('no_record')}}</p>

      <el-pagination v-if="game_list.length > 0"
          class="pagination"
          background 
          layout="prev, pager, next" 
          :total="totalRecords" 
          :page-size="currentPage.limit" 
          :current-page="currentPage.page" 
          @current-change="handlePageChange" 
      />
    </div>
  </div>
</template>

<script setup>
import axios from "@/utils/api";
import { useUserInfoStore } from "@/store/modules/user_info/index";
import { reactive,ref } from "vue";

const user_infoStore = useUserInfoStore();
const user_info = user_infoStore.userInfo;
const userid = user_info.id;

const currentPage = reactive({ page: 1, limit: 11 });
const totalRecords = ref(0);

const game_list = ref([]);
const getList = async () => {
  const { page, limit } = currentPage;
  const list = await axios.get(`/mc_use_log?user_id=${userid}&limit=${limit}&page=${page}`);
  game_list.value = list.data.data;
  totalRecords.value = list.data.total; 
  console.log(game_list);
};
getList();


const handlePageChange = (newPage) => {
    currentPage.page = newPage;
    getList();
};
</script>

<style lang="less" scoped>
.pagination{
    display: flex;
    justify-content: end;
    margin: 20px;
}
.recharge_title {
  font-size: 25px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
  text-align: center;
}
.recharge_content {
  min-height: 502px;
  .title,
  .main_line {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    span {
      flex: 1;
      text-align: center;
    }
  }
  .main_line:last-child {
    border-bottom: none;
  }
}
</style>
